<template>
  <div id="TextEditor">
    <div id="TextEditorNav">
      <div ref='toolbarContainer'></div>
    </div>
<!--    <div id="TextEditorMain">-->
<!--      <div id="TextEditorMainCode">-->
<!--        <div ref='textContainer'></div>-->
<!--      </div>-->
<!--      <div id="TextEditorMainShow" v-html="articleHtml"></div>-->
<!--    </div>-->
  </div>
</template>

<script>
import WangEditor from 'wangeditor';
import {uploadFile} from 'src/plugins/http/server/common';
import config from './config.ts';
// 设置菜单
export default {
    'name': 'TextEditor',
    'props':{
        'editChange':{
            'type':Function,
            'default':()=>{}
        }
    },
    data() {
        return {
            'articleHtml': '',
            'editor': null
        };
    },
    mounted() {
        // 设置工具栏和编辑区分开
        this.editor = new WangEditor(this.$refs.toolbarContainer, this.$refs.textContainer);
        const {editor} = this;
        editor.config = Object.assign(editor.config,config);
        // 设置内容变化事件
        editor.config.onchange = newHtml => {
            this.onChange(newHtml);
        };
        editor.config.focus = false;
        editor.config.showLinkVideo = false;
        // 自己实现图片上传
        editor.config.uploadImgMaxLength = 5;
        editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
        editor.config.customUploadImg = (resultFiles, insertImgFn) => {
            this.updateImg(resultFiles, insertImgFn);
        };
        editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024; // 1024m
        editor.config.uploadVideoAccept = ['mp4'];
        editor.config.customUploadVideo = (resultFiles, insertVideoFn)=> {
            this.updateImg(resultFiles, insertVideoFn);
        };
        editor.create();
    },
    'methods': {
        onChange(newHtml) {
            this.articleHtml = this.imgTagAddStyle(newHtml);
            this.$emit('editChange', this.articleHtml);
        },
        updateImg(files, insertImgFn) {
            if (files && files.length) {
                uploadFile(files, rs => {
                    rs.data.forEach(path => {
                        insertImgFn(path.replace(/http:\/\/192\.168\.1\.74:8848/,`http://${window.location.host}`));
                    });
                });
            }
        },
        insert(content) {
            const {editor} = this;
            editor.txt.clear();
            editor.txt.html(this.imgTagAddStyle(content));
        },
        imgTagAddStyle(htmlStr) {
            //正则匹配所有img标签
            //var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
            //正则匹配不含style="" 或 style='' 的img标签
            let regex1 = new RegExp('(i?)(\<img)(?!(.*?style=[\'"](.*)[\'"])[^\>]+\>)', 'gmi');
            //给不含style="" 或 style='' 的img标签加上style=""
            htmlStr = htmlStr.replace(regex1, '$2 style=""$3');
            //console.log(`增加style=""后的html字符串：${htmlStr}`);
            //正则匹配含有style的img标签
            let regex2 = new RegExp('(i?)(\<img.*?style=[\'"])([^\>]+\>)', 'gmi');
            //在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
            htmlStr = htmlStr.replace(regex2, '$2vertical-align: top;$3');
            //console.log(`在img标签的style里面增加样式后的html字符串：${htmlStr}`);
            return htmlStr;
        }
    }
};
</script>

<style lang="less">
  .w-e-text img{
    vertical-align: top;
  }
</style>

